<!--菜单管理，核心组件-->
<template>
  <el-table ref="refMenuTable" :data="modelMenuTree" row-key="id" border stripe>
    <el-table-column prop="title" label="标题名称" min-width="200" show-overflow-tooltip />
    <el-table-column prop="name" label="路由名称" />
    <el-table-column prop="path" label="路由地址" />
    <el-table-column prop="redirect" label="重定向地址" />
    <el-table-column prop="componentPath" label="组件位置" />
    <el-table-column prop="layoutName" label="布局页面" />
    <el-table-column prop="isShow" label="隐藏" />
    <el-table-column prop="type" label="类型" />

    <el-table-column align="center" label="操作" width="140" fixed="right">
      <template #default="{ row }">操作按钮</template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
  import { onActivated, onMounted, ref } from 'vue'
  import { SysMenuApi } from '/@/api/sysApi/SysMenuApi.ts'
  import { ElTable } from 'element-plus'
  import MenuType = SysMenuApi.MenuType

  const refMenuTable = ref<InstanceType<typeof ElTable>>()

  const modelMenuTree = ref<MenuType[]>([]) // 菜单树

  const stateLoadingData = ref<boolean>(false) // 是否正在加载数据

  onActivated(() => {
    refMenuTable.value.doLayout()
  })

  onMounted(async () => {
    await getMenuForest()
  })

  const getMenuForest = async () => {
    stateLoadingData.value = true
    try {
      const { data } = await SysMenuApi.forestAll()
      modelMenuTree.value = data.data
    } finally {
      stateLoadingData.value = false
    }
  }
</script>
<style scoped lang="less"></style>